<template>
  <div style="overflow: auto;position: inherit">
    <div class="electricity_div" v-loading="load" element-loading-text="loading">
      <img class="pos_mgu" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_mgu" :subtitle="subtitle" :energy_value="mgu_value" :title="mgu_title" :units="units"/>

      <img class="pos_chiller" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_chiller" :subtitle="subtitle" :energy_value="chiller_value" :title="chiller_title"
                  :units="units"/>

      <img class="pos_compressor" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_compressor" :subtitle="subtitle" :energy_value="compressor_value"
                  :title="compressor_title" :units="units"/>

      <img class="pos_light" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_light" :subtitle="subtitle" :energy_value="light_value" :title="light_title"
                  :units="units"/>

      <img class="pos_office" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_office" :subtitle="subtitle" :energy_value="office_value" :title="office_title"
                  :units="units"/>

      <img class="pos_production" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_production" :subtitle="subtitle" :energy_value="production_value"
                  :title="production_title" :units="units"/>

      <img class="pos_conditioner" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_conditioner" :subtitle="subtitle" :energy_value="conditioner_value"
                  :title="conditioner_title" :units="units"/>
    </div>
  </div>
</template>

<script>
import EnergyGrid from '../../components/EnergyGrid'
import { findTodayTotal } from '../../api/tenergy'
export default {
  components: { EnergyGrid },
  name: 'electricity',
  data () {
    return {
      load: true,
      subtitle: 'Day Electricity Consumption:',
      units: 'Kw/h',
      mgu_title: 'MGU',
      chiller_title: 'Chiller',
      compressor_title: 'Air Compressor',
      light_title: 'Lighting socket Workshop',
      office_title: 'Office',
      production_title: 'Production',
      conditioner_title: 'Air Conditioner',

      mgu_value: 0,
      chiller_value: 0,
      compressor_value: 0,
      light_value: 0,
      office_value: 0,
      production_value: 0,
      conditioner_value: 0
    }
  },
  mounted () {
    this.requsetTodayTotal()
  },
  methods: {
    async requsetTodayTotal () {
      try {
        const res = await findTodayTotal()
        console.log(res)
        let data = res.data
        for (let i in data) {
          switch (data[i].deviceName) {
            case 'MGU Energy Consumption':
              this.mgu_value = data[i].todayValue
              break
            case 'Air Compressor':
              this.compressor_value = data[i].todayValue
              break
            case 'Workshop':
              this.light_value = data[i].todayValue
              break
            case 'Chiller':
              this.chiller_value = data[i].todayValue
              break
            case 'Office':
              this.office_value = data[i].todayValue
              break
            case 'Production':
              this.production_value = data[i].todayValue
              break
            case 'Air Conditioner':
              this.conditioner_value = data[i].todayValue
              break
          }
        }
        this.load = false
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
  /* $percent:calc(100vw / 1920);
   $bg-width:calc((1920px - 250px) * (100vw / 1920));
   $bg-height:calc((1920px - 250px)/2);*/
  .electricity_div {
    width: 1800px;
    height: 900px;
    background-repeat: no-repeat;
    background-image: url("../../assets/bg_pic.jpg");
    background-size: 100% auto;
    position: relative;
    box-sizing: inherit;
  }

  .pos_mgu {
    position: absolute;
    left: 660px;
    top: 170px;
  }

  .grid_mgu {
    position: absolute;
    left: 510px;
    top: 110px;
  }

  .pos_chiller {
    position: absolute;
    left: 830px;
    top: 310px;
  }

  .grid_chiller {
    position: absolute;
    left: 700px;
    top: 250px;
  }

  .pos_compressor {
    position: absolute;
    left: 610px;
    top: 330px;
  }

  .grid_compressor {
    position: absolute;
    left: 290px;
    top: 300px;
  }

  .pos_light {
    position: absolute;
    left: 670px;
    top: 430px;
  }

  .grid_light {
    position: absolute;
    left: 350px;
    top: 420px;
  }

  .pos_office {
    position: absolute;
    left: 950px;
    top: 440px;
  }

  .grid_office {
    position: absolute;
    left: 800px;
    top: 380px;
  }

  .pos_production {
    position: absolute;
    left: 1280px;
    top: 390px;
  }

  .grid_production {
    position: absolute;
    left: 1200px;
    top: 420px;
  }

  .pos_conditioner {
    position: absolute;
    left: 1120px;
    top: 250px;
  }

  .grid_conditioner {
    position: absolute;
    left: 1150px;
    top: 230px;
  }
</style>
